<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="common.jsp"%>

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description"
	content="An Amaze UI template that helps you build fast, modern mobile web apps.">
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>停车缴费</title>

<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">

<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link rel="icon" type="image/png" href="i/favicon.png">

<!-- Add to homescreen -->
<link rel="manifest" href="manifest.json">

<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Web Starter Kit">
<link rel="icon" sizes="192x192"
	href="i/touch/chrome-touch-icon-192x192.png">

<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title"
	content="Amaze UI Sfavicon.pngtarter Kit">
<link rel="apple-touch-icon" href="i/touch/apple-touch-icon.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage"
	content="i/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#0e90d2">

<style type="text/css">
	.am-list {
	    margin-bottom: 0px;
	    padding-left: 0;
	    border: none;
	}
	
	.am-list-news-default .am-list>li {
	    border-color: #dddddd;
	}
	
	.am-titlebar-multi .am-titlebar-title {
	    font-weight: normal;
	}
</style>

<script>
	$(function() {
		var winWidth = $(document).width();
		var winHeight = $(document).height();
		var widthRule = winWidth - 130;
		$('#chargeRule').css('width', widthRule);
		var marginTop = winHeight/4;
		$('#empty').css('margin-top', marginTop+'px');
	});
</script>
</head>
<body class="am-with-fixed-navbar">
	<c:if test="${orderFlag==2}">
		<figure id="empty" data-am-widget="figure" class="am am-figure am-figure-default "data-am-figure="{}" style="margin: 0;">
		  	<div style="text-align: center;" align="center">
				<img src="<%=basePath%>static/images/wechat/no_records.png" style="margin:0 auto; padding: 0px; height: 8em; width: 8em; " />
		  		<div style="margin-top: 0.3em;" >订单已缴费或已过期</div>
			</div>
		</figure>
	</c:if>
	<c:if test="${orderFlag==1}">
		<div data-am-widget="titlebar" class="am-titlebar am-titlebar-multi" style="border:none; margin:0; margin-top: 10px; padding-left: 10px; padding-right: 10px; height: 100px; background: #FFF;">
			<nav style="padding-top: 10px; padding-bottom: 10px; ">
				<img id="parkingImage" src="" onerror="serDefaultImg('parkingImage')" style="width: 80px; height: 80px;" />
			</nav>
			<div class="am-titlebar-title" style="padding: 0.6em 0 0.6em 1em;">
				<div class="am-list-item-text" style="font-size: 1.6rem; padding: 2px 0; color: #666666;">
					<c:choose>
						<c:when test="${parking.type==1 }">
							<span><img src="<%=basePath%>static/images/wechat/parking_inside.png" style="width: 40px;"></span>
						</c:when>
						<c:when test="${parking.type==2 }">
							<span><img src="<%=basePath%>static/images/wechat/parking_outside.png" style="width: 40px;"></span>
						</c:when>
					</c:choose>
					<span style="color: #292929" >${parking.name }</span>
				</div>
				<div id="chargeRule" class="am-list-item-text" style="font-size: 1.4rem; padding: 2px 0; color: #666666;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
					${parking.chargeDes }
				</div>
			</div>
		</div>
	
		<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="border: none; margin: 0; margin-top: 10px;">
		  <div class="am-list-news-bd">
		    <ul class="am-list" style=" border:none; padding-left: 20px; padding-right:20px;">
		      <li class="am-g am-list-item am-list-item-desced" style="border: none; background: #ededed;">
		      	<div class="am-list-item-hd">订单详情</div>
		      </li>
		    </ul>
		  </div>
		</div>
	   <div data-am-widget="list_news" class="am-list-news am-list-news-default" style="border: none; margin: 0;">
		  <div class="am-list-news-bd">
		    <ul class="am-list" style=" border:none; padding-left: 20px; padding-right:20px; background: #FFF;">
		      <li class="am-g am-list-item am-list-item-desced" style="border: none;">
		        <span class="am-list-item-hd" style="padding: 0; color:#666666;">车牌号码：</span>
		        <span class="am-list-item-hd" style="padding: 0; color:#292929;">${order.plateNumber }</span>
		      </li>
		      <li class="am-g am-list-item am-list-item-desced" style="border: none; border-top: 1px solid #dddddd;">
		        <span class="am-list-item-hd" style="padding: 0; color:#666666;">入场时间：</span>
		        <span class="am-list-item-hd" style="padding: 0; color:#292929;">${order.enterTime }</span>
		      </li>
		      <li class="am-g am-list-item am-list-item-desced" style="border: none; border-top: 1px solid #dddddd;">
		        <span class="am-list-item-hd" style="padding: 0; color:#666666;">出场时间：</span>
		        <span class="am-list-item-hd" style="padding: 0; color:#292929;">${order.leaveTime }</span>
		      </li>
		      <li class="am-g am-list-item am-list-item-desced" style="border: none; border-top: 1px solid #dddddd;">
		        <span class="am-list-item-hd" style="padding: 0; color:#666666;">订单状态：</span>
		        <span class="am-list-item-hd" style="padding: 0; color: #ec6c2c;">待支付</span>
		      </li>
		      <li class="am-g am-list-item am-list-item-desced" style="border: none; border-top: 1px solid #dddddd;">
		        <span class="am-list-item-hd" style="padding: 0; color:#666666;">应付金额：</span>
		        <span class="am-list-item-hd" style="padding: 0; color: #ec6c2c;">${order.payableFee }</span>
		      </li>
		      <li class="am-g am-list-item am-list-item-desced" style="border: none; border-top: 1px solid #dddddd;">
		        <span class="am-list-item-hd" style="padding: 0; color:#666666;">优惠金额：</span>
		        <span class="am-list-item-hd" style="padding: 0; color: #ec6c2c;">${order.discountFee }</span>
		      </li>
		      <li class="am-g am-list-item am-list-item-desced" style="border: none; border-top: 1px solid #dddddd;">
		        <span class="am-list-item-hd" style="padding: 0; color:#666666;">实付金额：</span>
		        <span class="am-list-item-hd" style="padding: 0; color: #f62e54; font-weight: bold;">${order.paidFee }</span>
		      </li>
		    </ul>
		  </div>
		</div>
		
		<div data-am-widget="list_news"
			class="am-list-news am-list-news-default" style="margin: 0; clear:both; background: #FFF;">
			<div class="am-list-news-bd" style="padding: 0px 20px; padding-top:20px; padding-bottom: 100px;">
				<ul class="am-list" style=" text-align: center;">
					<li class="am-g am-list-item-desced" style="border: none; text-align: center;">
						<button id="payBtn" onclick="toPay()" type="button" class="am-btn am-btn-primary am-btn-block am-round" style="background-color: #ec6c2c; color: #fff; border-color: #ec6c2c; border-radius: 4px; font-size: 1.8rem; ">立即支付</button>
					</li>
				</ul>
			</div>
		</div>
		
		
		<div class="am-share am-modal-actions" id="choose_pay_type" style="display: none;">
			<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="border: none; margin: 0;">
			  <div class="am-list-news-bd">
			    <ul class="am-list" style=" border:none;">
			      <li class="am-g am-list-item am-list-item-desced" style=" border: none; background-color: #eee; padding-left:20px; padding-right: 20px;">
			      	<div class="am-u-sm-6 am-list-item-hd" style="text-align: left; padding-left:0;">选择支付方式</div>
			      	<div class="am-u-sm-6" style="text-align: right;" >
			      		<span onclick="closeWin()">关闭</span>
			      	</div>
			      </li>
			      <li onclick="choosePay(5)" class="am-g am-list-item am-list-item-desced" style="border: none; padding-left:20px; padding-right: 20px;">
			        <div class="am-u-sm-9 am-list-item-hd" style="padding: 0;text-align: left;"><img src="<%=basePath%>static/images/wechat/user_wallet.png" style="margin:0 auto; padding: 0px; border: none; height: 2em; width: 2em; margin-right: 10px;" />余额(￥${balance }元)</div>
			        <span class="am-u-sm-3" style="text-align: right;">推荐</span>
			      </li>
			      <li onclick="choosePay(2)" class="am-g am-list-item am-list-item-desced" style="border: none; border-top: 1px solid #dddddd; padding-left:20px; padding-right: 20px;">
			        <div class="am-u-sm-9 am-list-item-hd" style="padding: 0;text-align: left;"><img src="<%=basePath%>static/images/wechat/pay_weixin.png" style="margin:0 auto; padding: 0px; border: none; height: 2em; width: 2em; margin-right: 10px;" />微信</div>
			        <span class="am-u-sm-3" style="text-align: right;"></span>
			      </li>
			      <li onclick="choosePay(1)" class="am-g am-list-item am-list-item-desced" style="border: none; border-top: 1px solid #dddddd; padding-left:20px; padding-right: 20px;">
			        <div class="am-u-sm-9 am-list-item-hd" style="padding: 0;text-align: left;"><img src="<%=basePath%>static/images/wechat/pay_ali.png" style="margin:0 auto; padding: 0px; border: none; height: 2em; width: 2em; margin-right: 10px;" />支付宝</div>
			        <span class="am-u-sm-3" style="text-align: right;"></span>
			      </li>
			    </ul>
			  </div>
			</div>
		</div>
		
		  <!--隐藏域-->
		  <input type="hidden" id="orderNo" name="orderNo" value="${order.orderNo}" />
		  <input type="hidden" id="paidFee" name="paidFee" value="${order.paidFee}" />
		  <input type="hidden" id="uid" name="uid" value="${uid}" />
		  <input type="hidden" id="ecode" name="ecode" value="${ecode}" />
		
	</c:if>
	
	<div class="am-dimmer" data-am-dimmer="" style="display: none;"></div>
	
	<script>
		function toPay() {
			var uid = $('#uid').val();
			var ecode = $('#ecode').val();
			var orderNo = $('#orderNo').val();
			var paidFee = $('#paidFee').val();
			if (parseFloat(paidFee) > 0) {
				$('#payBtn').css("background-color","#fee1a9");
				$('#payBtn').css("border-color", "#fee1a9");
				$('#payBtn').attr("disabled",true);
				useWeixin(uid, ecode, orderNo);
//				updateOrderStataus();
			} else {
				alertText("您当前没有需要缴费的订单");
			}
		}
	
		/**
		 * 从服务端获取微信签名数据
		 * @param price
		 * @return
		 */
		function useWeixin(uid, ecode, orderNo)
		{
			var bodyStr = "停车订单";
			var url = '<%=basePath%>api/initWeixinPay';
			var dynamicURL = location.href.split('#')[0];
			$.ajax(url, {
				    type: 'post',
				    data: { 
							dynamicURL:dynamicURL,
							uid:uid,
							ecode:ecode,
							orderNo:orderNo,
							body:bodyStr
				    	  },
				    success: function(result){
				    	var rtn = JSON.parse(result);
				    	if(rtn.code == 1)
				    	{
				    		var appId = rtn.data.appId;
				    		var signature = rtn.data.signature;
				    		var timestamp = rtn.data.timestamp;
				    		var nonceStr = rtn.data.nonceStr;
				    		
				    		var prepay_id = rtn.data.WxOrder.prepay_id;
				    		var signType = rtn.data.WxOrder.signType;
				    		var paySign = rtn.data.WxOrder.paySign;
				    		
				    		initWeixin(appId, timestamp, nonceStr, signature, prepay_id, signType, paySign);
				    	} else {
				    		alertText(rtn.text);
				    	}
				    }
				});
		}

		/**
		 * 初始化微信签名验证
		 * @param {Object} appId
		 * @param {Object} timestamp
		 * @param {Object} nonceStr
		 * @param {Object} signature
		 */
		function initWeixin(appId, timestamp, nonceStr, signature, prepay_id, signType, paySign)
		{
			wx.config({
				debug: false, 
				appId: appId, 
				timestamp: timestamp, 
				nonceStr: nonceStr, 
				signature: signature,
				jsApiList: ['chooseWXPay'] 
			});
			
			wx.ready(function(){
				payByWeixin(timestamp, nonceStr, prepay_id, signType, paySign);
			});
			
			wx.error(function(res){
				alertText('调用失败！');
			});
		}
		
		/**
		 * 微信支付结果处理
		 * @param {Object} timestamp
		 * @param {Object} nonceStr
		 * @param {Object} prepay_id
		 * @param {Object} signType
		 * @param {Object} paySign
		 */
		function payByWeixin(timestamp, nonceStr, prepay_id, signType, paySign){
			wx.chooseWXPay({
			    timestamp: timestamp, 
			    nonceStr: nonceStr, 
			    package: prepay_id, 
			    signType: signType, 
			    paySign: paySign, 
			    cancel:function(res){
			    	alertText("支付取消");
			    	$('#payBtn').css("background-color","#ec6c2c");
					$('#payBtn').css("border-color", "#ec6c2c");
					$('#payBtn').attr("disabled",false);
				},
				error:function(res){
					alertText("支付出错");
				},
				success:function(res){
					alertText("支付成功");
					updateOrderStataus();
				}
			});
			
		}
		
		function updateOrderStataus()
		{
			var orderNo = $('#orderNo').val();
			var url = "<%=basePath%>api/paySuccess";
			$.post(url,
				  {
					orderNo:orderNo
				  },
				  function(result){
					var rtn = JSON.parse(result);
					if(rtn.code == 1){
						WeixinJSBridge.call('closeWindow');
					}else{
						alertText(rtn.text);
					}
				  }
			);
		}
		
		
		function openWin() {
			$('body').addClass("am-dimmer-active");
			$('#choose_pay_type').css('display', 'block');
			$('#choose_pay_type').removeClass('am-modal-out');
			$('#choose_pay_type').addClass('am-modal-active');
			$(".am-dimmer").addClass('am-active');
			$(".am-dimmer").css('display', 'block');
		}
		
		function closeWin() {
			$('body').removeClass("am-dimmer-active");
			$('#choose_pay_type').css('display', 'none');
			$('#choose_pay_type').removeClass('am-modal-active');
			$('#choose_pay_type').addClass('am-modal-out');
			$(".am-dimmer").css('display', 'none');
			$(".am-dimmer").removeClass('am-active');
		}
		
		function serDefaultImg(domId){
			var errorURL = "<%=basePath%>static/images/parking.jpg";
			var id = '#'+domId;
			$(id).attr("src", errorURL);
		}
	</script>

	<!-- Built with love using Web Starter Kit -->
</body>

</html>